<!--
* @author wn
* @date 2023/03/08 15:17:14
* @description: 框架右侧  头部区域 右上角 用户 menu
!-->
<template>
	<div class="user-wrapper">
		<!-- 搜索框 -->
		<Icon :icon="icon" @click="searchMenuVisible = !searchMenuVisible" />
		<transition name="search">
			<div v-if="searchMenuVisible" class="search-input">
				<!-- open='true' -->
				<a-select
					showSearch
					:showArrow="false"
					placeholder="搜索菜单"
					optionFilterProp="children"
					:filterOption="filterOption"
					:getPopupContainer="node => node.parentNode"
					:style="{ width: '100%' /*  marginBottom: '50px' */ }"
					@change="searchMethods"
					@blur="hiddenClick"
				>
					<a-select-option
						v-for="(site, index) in searchMenuOptions"
						:key="index"
						:value="site.id"
						>{{ site.meta.title }}</a-select-option
					>
				</a-select>
			</div>
		</transition>
		<!-- <header-notice class="action" /> -->
		<Icon :icon="iconNotice" />
		<a-dropdown overlayClassName="my-dropdown">
			<span class="action action-full ant-dropdown-link user-dropdown-menu">
				<a-avatar class="avatar" size="small" :src="getAvatar()" />
				<span v-if="isDesktop">欢迎您，{{ info.nickname || 'ICDEMO' }}</span>
			</span>
			<template #overlay>
				<a-menu class="user-dropdown-menu-wrapper">
					<a-menu-item key="3" @click="systemSetting">
						<Icon :icon="iconTool" style="margin-right: 16px" />
						<span>系统设置</span>
					</a-menu-item>
					<a-menu-item key="4" @click="updatePassword">
						<Icon :icon="iconSet" style="margin-right: 16px" />
						<span>密码修改</span>
					</a-menu-item>
					<a-menu-item key="5" @click="updateCurrentDepart">
						<Icon :icon="iconCluster" style="margin-right: 16px" />
						<span>切换部门</span>
					</a-menu-item>
					<a-menu-item key="6" @click="clearCache">
						<Icon :icon="iconSync" style="margin-right: 16px" />
						<span>清理缓存</span>
					</a-menu-item>
				</a-menu>
			</template>
		</a-dropdown>
		<span class="action">
			<a class="logout_title" href="javascript:;" @click="handleLogout">
				<Icon :icon="iconOut" class="out" />
				<span v-if="isDesktop">&nbsp;退出登录</span>
			</a>
		</span>
		<!-- <user-password ref="userPassword"></user-password>
		<depart-select
			ref="departSelect"
			:closable="true"
			title="部门切换"
		></depart-select>
		<setting-drawer
			ref="settingDrawer"
			:closable="true"
			title="系统设置"
		></setting-drawer> -->
	</div>
</template>
<script setup>
import { Icon } from '@/antd/icons'
import { recursiveChildNodes } from '@/utils/menuUtil'
import { computed, inject, ref } from 'vue'

// 搜索图标
const icon = ref('SearchOutlined')
const iconOut = ref('LogoutOutlined')
const iconNotice = ref('NotificationOutlined')
const iconTool = ref('ToolOutlined')
const iconSet = ref('SettingOutlined')
const iconCluster = ref('ClusterOutlined')
const iconSync = ref('SyncOutlined')

// 搜索框显示
const searchMenuVisible = ref(false)

// 搜索框组件 -- 是什么  'a-modal' : 'span'
// const searchMenuComp = ref('span')

// 是否根据输入项进行筛选
const filterOption = (input, option) =>
	option.componentOptions.children[0].text
		.toLowerCase()
		.indexOf(input.toLowerCase()) >= 0

// 点击选中 触发
const searchMethods = () => {}

// 失去焦点的时回调 searchMenuVisible
const hiddenClick = () => {}

// 搜索参数  来自 GlobalLayout-- useUser
const user = inject('user')
const { permissionList, avatar, info } = user

// 递归 所有 permission 子节点
// 导入数组  permissionList
const searchMenuOptions = computed(() => recursiveChildNodes(permissionList))

// 是电脑版
const isDesktop = ref(true)

// 获取 头像
const getAvatar = () => avatar
</script>
<style scoped lang="less">
.user-wrapper {
	display: flex;
	align-items: center;
	font-size: 15px;
	> :nth-child(n) {
		height: 45px;
		line-height: 45px;
		padding: 0 10px;
		&:hover {
			background: rgba(255, 255, 255, 0.3);
		}
	}
	> :last-child {
		margin-right: 10px;
	}
	color: #fff;
	.search-input {
		width: 210px;
		// margin-bottom: 0 !important;

		:deep(.ant-select-selector) {
			background-color: inherit;
			border: 0;
			border-bottom: 1px solid white;
			color: #fff;
			.ant-select-selection-placeholder {
				color: #fff;
			}
		}
	}
	.avatar {
		margin-right: 10px;
		background: hsla(0, 0%, 100%, 0.85);
		vertical-align: middle;
	}
	// a-dropdown
	.my-dropdown {
		min-width: 190px;
	}
	.out {
		vertical-align: middle;
		margin-right: 2px;
	}
	.logout_title {
		color: inherit;
		text-decoration: none;
	}
	// 旧元素 0-->20px 新元素 20px-->0
	.search {
		&-enter-from,
		&-leave-to {
			opacity: 0;
			transform: translateX(100px);
		}
		&-enter-active,
		&-leave-active {
			transition: all 0.6s;
		}
		&-enter-to,
		&-leave-from {
			opacity: 1;
			transform: translateX(0);
		}
	}
}
</style>
